<template>
  <div class="line-echarts" ref="lineChartRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
type EChartsOption = echarts.EChartsOption;

let chart: echarts.ECharts;
let lineChartRef = ref();

onMounted(() => {
  chart = echarts.init(lineChartRef.value);
  chart.setOption(option);
});

const option: EChartsOption = {
  grid: {
    top: '12%',
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  legend: {
    data: ['缴纳金额（万）'],
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine:{
        lineStyle:{
          type: 'dashed',
          color: '#e8c433'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    }
  ],
  series: [
    {
      name: "缴纳金额（万）",
      type: 'bar',
      barWidth: '40%',
      data: [180, 270, 330, 260, 268, 160, 253, 221, 264],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0, [{//只要修改前四个参数就ok
              offset: 0,
              color: '#c70a0a'
            }, //柱图渐变色
              {
                offset: 1,
                color: '#e8ad1a'
              }
            ]
        ),
      }
    }
  ]
};
</script>

<style scoped>
.line-echarts {
  width: 100%;
  height: 300px;
  margin-top: 0;
  margin-bottom: 0;
}

</style>
